<template>
  <div class="frame">
    <homeNavBar></homeNavBar>
    <banner></banner>
    <homeSearchBox></homeSearchBox>
    <homeCategories></homeCategories>
    <homeSearchBar v-show="isSearchBarShow"></homeSearchBar>
    <homeSelected></homeSelected>

  </div>
</template>

<script>
export default {
  name: "home"
}
</script>
<script setup>
import homeSearchBar from "@/components/home-serach-bar/home-search-bar.vue";
import getScrollHook from "@/hooks/getScrollHook"
import homeNavBar from './cpns/home-nav-bar.vue';
import banner from './cpns/banner.vue';
import homeSearchBox from './cpns/home-search-box.vue';
import homeCategories from './cpns/home-categories.vue';
import homeSelected from './cpns/home-selected.vue';
import { useHomeStore } from "@/store/modules/home";
import { watch, ref, computed, onActivated } from "vue";
const homeStore = useHomeStore()

// 发送网络请求
// 1. 获取热门建议
homeStore.storeGetHotSuggestions()
// 2. 获取分类数据
homeStore.storeGetHomeCategories()
// 3. 获取热门精选数据
homeStore.storeGetHomeSelected()


// 4.监听window窗口滚动
const { isReachButton, scrollTop } = getScrollHook()

watch(isReachButton, newValue => {

  if (newValue) {
    homeStore.storeGetHomeSelected().then(() => {
      isReachButton.value = false
    })
  }

})
// let lastScrollTop = 0

// 5.搜索栏
const isSearchBarShow = ref(false)

watch(scrollTop, newValue => {
  // console.log(newValue)
  // lastScrollTop = newValue
  isSearchBarShow.value = newValue >= 350
})

// onActivated(() => {
//   window.scrollTo({
//     top: lastScrollTop
//   })
// })
</script>

<style lang="less" scoped>
// .frame {
//   position: relative;
// }</style>